/**
 * state：组件的记忆
 */

import { useState } from 'react';
import { sculptureList } from '../assets/memory-of-components/data';

export default function Galloery() {
    // 普通变量无法满足
    // let index = 0;
    // index： State 变量 用于保存渲染间的数据。
    // setIndex：State setter 函数 更新变量并触发 React 再次渲染组件。
    // useState: Hook函数，只能在组件或自定义Hook的最顶层调用，不能在条件语句。循环语句、或其他嵌套函数内调用Hook
    const [index, setIndex] = useState(0);
    const [showMore, setShowMore] = useState(false);
    // state 完全私有于声明它的组件

    function handleClick() {
        // 局部变量无法在多次渲染中持久保存
        // 更改局部变量不会触发渲染
        // index += 1;

        setIndex(index + 1);
    }

    let sculpture = sculptureList[index];

    const handleShowMore = () => {
        setShowMore(!showMore);
    }

    return (
        <>
            <button onClick={handleClick}>Next</button>
            <h2>
                <i>{sculpture.name} </i>
                by {sculpture.artist}
            </h2>
            <h3>
                ({index + 1} of {sculptureList.length})
            </h3>
            <div>
                <button onClick={handleShowMore}> {showMore ? 'Hide' : 'Show'} Detail </button>
            </div>
            <p>{showMore && sculpture.description}</p>
            <img
                src={sculpture.url}
                alt={sculpture.alt}
            />

        </>
    )
}

